<template>
  <a-spin :spinning="confirmLoading" class="commission-set-content">

    <div style="color: #000;font-weight: bold;">大厦全局佣金设置</div>
    <div class="global-limited limited-box">
      <a-form-model-item label="限时优惠" :labelCol="labelCol" :wrapperCol="wrapperCol" class="autoOffer">
        <a-time-picker v-model="model.limitedTimeOfferStartSite" placeholder='开始' format="HH:mm" valueFormat="HH:mm" :allowClear="false" @change="onChangeGlobalLimited('start_time')"/>
        -
        <a-time-picker v-model="model.limitedTimeOfferEndSite" placeholder='截止' format="HH:mm" valueFormat="HH:mm" :allowClear="false" @change="onChangeGlobalLimited('end_time')"/>
        <a-input-number :min='0' v-model="model.limitedTimeOfferMoneySite" placeholder="优惠金额" @change="onChangeGlobalLimited('discount_price')" style="margin-left:10px"/>元
      </a-form-model-item>
      <a-switch checked-children="开启" un-checked-children="关闭" v-model="model.isLimitedTimeOfferOpenSite" @change="onChangeGlobalLimited('isLimitedTimeOfferOpenSite')" style="margin-right:10px"/>
      <!-- <a-radio-group name="radioGroup" v-model="model.discount_payer" v-show="model.isLimitedTimeOfferOpenSite" @change="onChangeGlobalLimited('discount_payer')">
        <a-radio value="platform">平台承担</a-radio>
        <a-radio value="merchant">商家承担</a-radio>
      </a-radio-group> -->
    </div>

    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row class="my-row">
          <a-col :span="24" v-for="(item, index) in model.hcMerchantCommissionList">
            <a-form-model-item :label="item.merchantName" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-model="item.amount" placeholder="佣金金额"/>
              元
              <a-input-number v-model="item.percentage" placeholder="佣金百分比"
                              style="margin-left: 10px; width: 100px;"/>
              %

            </a-form-model-item>
              <div class="limited-box item-limited">
                <a-form-model-item label="限时优惠" :labelCol="labelCol" :wrapperCol="wrapperCol" class="autoOffer">
                  <a-time-picker v-model="item.limitedTimeOfferStartMerchant" placeholder='开始' format="HH:mm" valueFormat="HH:mm" :allowClear="false" />
                  -
                  <a-time-picker v-model="item.limitedTimeOfferEndMerchant" placeholder='截止' format="HH:mm" valueFormat="HH:mm" :allowClear="false" />
                  <a-input-number :min='0' v-model="item.limitedTimeOfferMoneyMerchant" placeholder="优惠金额" style="margin-left:10px"/>元
                </a-form-model-item>
                <a-switch checked-children="开启" un-checked-children="关闭" v-model="item.isLimitedTimeOfferOpenMerchant" style="margin-right:10px"/>
                <a-radio-group name="radioGroup" v-model="item.amountOfBearing" v-show="item.isLimitedTimeOfferOpenMerchant">
                  <a-radio value="0">平台承担</a-radio>
                  <a-radio value="1">商家承担</a-radio>
                </a-radio-group>
              </div>

            
          </a-col>
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="地址ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressId">-->
          <!--              <a-input v-model="model.addressId" placeholder="请输入地址ID"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="门店ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="merchantId">-->
          <!--              <a-input v-model="model.merchantId" placeholder="请输入门店ID"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">-->
          <!--              <a-input-number v-model="model.amount" placeholder="请输入金额" style="width: 100%" />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="百分比" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="percentage">-->
          <!--              <a-input-number v-model="model.percentage" placeholder="请输入百分比" style="width: 100%" />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import {httpAction, getAction} from '@/api/manage'
import {validateDuplicateValue} from '@/utils/util'
import moment from 'moment';

export default {
  name: 'HcMerchantCommissionForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      validatorRules: {
        addressId: [
          {required: true, message: '请输入地址ID!'},
        ],
        merchantId: [
          {required: true, message: '请输入门店ID!'},
        ],
      },
      url: {
        add: "/hc/hcMerchantCommission/add",
        edit: "/hc/hcMerchantCommission/edit",
        queryById: "/hc/hcMerchantCommission/queryById"
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.model = Object.assign({}, record);
      this.model.isLimitedTimeOfferOpenSite = !!this.model.isLimitedTimeOfferOpenSite
      
      let list = []
      this.model.hcMerchantCommissionList.forEach(obj => {
        let val = JSON.parse(JSON.stringify(obj))
        val.isLimitedTimeOfferOpenMerchant = !!val.isLimitedTimeOfferOpenMerchant
        val.amountOfBearing = val.amountOfBearing == 1 ? '1' : '0'
        list.push(val)
      })

      this.model.hcMerchantCommissionList = list;
      this.visible = true;
    },
    submitForm() {
      const that = this;

      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let model = JSON.parse(JSON.stringify(this.model));
          model.isLimitedTimeOfferOpenSite = model.isLimitedTimeOfferOpenSite ? 1 : 0;
          model.limitedTimeOfferMoneySite = model.limitedTimeOfferMoneySite ? model.limitedTimeOfferMoneySite : 0;

          model.hcMerchantCommissionList.forEach(val => {
            val.isLimitedTimeOfferOpenMerchant = val.isLimitedTimeOfferOpenMerchant ? 1 : 0;
            val.limitedTimeOfferMoneyMerchant = val.limitedTimeOfferMoneyMerchant ? val.limitedTimeOfferMoneyMerchant : 0;
          })

          httpAction(this.url.edit, model, 'put').then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },

    // 全局设置的改变
    onChangeGlobalLimited(attr) {
      if (attr == 'isLimitedTimeOfferOpenSite') {
        this.$forceUpdate()
      }

      /* this.model.hcMerchantCommissionList.forEach(item => {
        this.$set(item, attr, this.model[attr])
      }) */
    },


  }
}
</script>
<style lang="scss">
.commission-set-content {
  .ant-form-item {
    margin-bottom: 0px;
  }
  .global-limited {
    border-bottom: 1px solid #cecccc;
    margin-bottom: 10px;
    display: flex;
    padding: 16px 0px;
  }
  .limited-box {
    align-items: center;
    .ant-form-item-label {
      width:auto;
      min-width: auto !important;
    }
    .ant-form-item-control-wrapper {
      width: auto;
    }
    .ant-time-picker {
      width: 80px;
    }
    .ant-input-number {
      width: 80px;
    }
  }
  .item-limited {
    display: inline-flex;
    margin-left: 20px;
  }
  .autoOffer {
    margin-bottom: 0px;
    margin-right: 36px;
  }
  .limited-time-offer {
    display: inline-block;
    padding-left: 10px;
  }
  .my-row {
    &>div {
      display: flex;
      margin-bottom: 18px;
    }
    .ant-form-item {
      // width: 418px;
    }
    .ant-form-item-label {
      width: auto;
      min-width: 240px;
    }
    .ant-form-item-control-wrapper {
      width: auto;
    }
  }
}
</style>